<template>
	<view style="padding: 0rpx;">		
		<u-sticky>
			<!-- 只能有一个根元素 -->
			<u-tabs-swiper ref="uTabs" :list="tabList" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750rpx" bg-color="#fafafa" />
		</u-sticky>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
			style="height: 100vh;">
			<swiper-item class="swiper-item" v-for="(swiperItem, index) in tabList" :key="index">
				<scroll-view scroll-y style="height: 100vh;width: 100%;" @scrolltolower="onreachBottom">
					<uni-list>
						<uni-list-item v-for="item in dataList" :key="item.id" direction="column">
							<template v-slot:header>
								<view>收购编号：<text>{{item.purchaseNo}}</text></view>
							</template>
							<template v-slot:body>
								<view style="margin: 15rpx 0rpx;">
									<view>卖家名称：<text>{{item.sellerName}}</text></view>
									<view>联系方式：<text>{{item.sellerPhone}}</text></view>
									<view>总金额：<text>{{item.totalAmount}}元</text></view>
								</view>
							</template>
							<template v-slot:footer>
								<view style="text-align: right;">
									<u-button type="default" size="mini" style="margin-left: 10rpx;" @click="gotoDetail(item.id)">查看</u-button>
									<u-button v-if="item.purchaseStatus != -1" type="primary" size="mini" style="margin-left: 10rpx;">编辑</u-button>
									<u-button v-if="item.purchaseStatus == 1" type="primary" size="mini" style="margin-left: 10rpx;">生成票据</u-button>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
					<u-divider v-if="noMore" color="#666" half-width="250" border-color="#E3E3E5"
						style="margin-top: 20rpx;">没有更多了</u-divider>
				</scroll-view>

				
			</swiper-item>
		</swiper>




		<MyTabbar />
	</view>
</template>

<script>
	import {
		listPurchaseRecord
	} from "@/api/oms/purchaseRecord.js";
	export default {
		data() {
			return {
				dataList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					purchaseStatus: null
				},
				totalRows: null,
				noMore: false,
				tabList: [{
						name: "全部",
						purchaseStatus: null
					},
					{
						name: "未生成票据",
						purchaseStatus: "1"
					},
					{
						name: "已生成票据",
						purchaseStatus: "2"
					},
					{
						name: "已经作废",
						purchaseStatus: "-1"
					},
				],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},
		onShow() {
			this.queryParams.pageNum = 1;
			this.loadData();
		},
		// onReachBottom() {
		// 	if (this.totalRows > this.dataList.length) {
		// 		this.queryParams.pageNum += 1;
		// 		this.loadData(true);
		// 	} else {
		// 		this.noMore = true;
		// 	}
		// },
		methods: {
			loadData(isAppend) {
				listPurchaseRecord(this.queryParams).then(res => {
					if (res.code == 200) {
						this.totalRows = res.total;
						if (isAppend) {
							console.log(this.dataList);
							this.dataList.push(...res.rows);
						} else {
							this.dataList = res.rows;
						}
					}
				});
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				let tab = this.tabList[index];
				this.queryParams.pageNum = 1;
				this.queryParams.purchaseStatus = tab.purchaseStatus;
				this.loadData(false);
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.totalRows > this.dataList.length) {
					this.queryParams.pageNum += 1;
					this.loadData(true);
				} else {
					this.noMore = true;
				}
			},
			gotoDetail(id){
				uni.navigateTo({
					url:"/pages/purchase/detail/detail?id="+id,
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
